<template>
  <div class="client-check-page">
    <top class="top" :key="id+'-top'"></top>
    <middle class="middle"  :key="id+'-middle'" @handleCancel="handleCancel"></middle>
  </div>
</template>

<script>
import Top from './layout/check/Top';
import Middle from './layout/check/Middle';

export default {
  name: "ClientCheckPage",
  props: {

  },
  data() {
    return {
      id: this.$route.params.id
    };
  },
  computed: {

  },
  mounted() {

  },
  watch: {
    '$route' (to, from) {
      if(to.params.id !== from.params.id && to.name == 'ClientCheck'){
        this.load();
      }
    }
  },
  methods: {
    load() {
      this.id = this.$route.params.id;
    },
    handleCancel() {
      this.id = `${this.id}-cancel`;
    }
  },
  components: {
    Top,
    Middle
  },
};
</script>

<style scoped lang="scss">
.client-check-page {
  >.top {
    margin-top: 2rem;
    margin-bottom: 100px;
  }
  >.bottom {

  }
}
</style>
